<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试字体</title>
    <link rel="stylesheet" href="styles/styles.css">
</head>

<body>
    <h1>你好，这是自定义字体！</h1>
    <p class="custom-font">这是一段使用自定义字体的文本。󰅀类干音、󰅄类干音、󰅈类干音、󰅌类干音、󰅘类干音、󰅨类干音、󰅸类干音、󰅼类干音、󰆄类干音、󰆈类干音、󰆌类干音、󰆔类干音、󰆜类干音、󰆤类干音、󰆬类干音、󰆼类干音、󰇌类干音和󰇘类干音。</p>

    <table>
        <tr>
            <td>Custom character in table:
            </td>
        </tr>
    </table>
    <br>
    <table class="custom-table" border="1" cellspacing="0" cellpadding="5" align="center">
        <tr>
            <th colspan="5">自制字体测试 </th>
            <tr>
                <th>󰅀类干音</th>
                <th>󰅄类干音</th>
                <th>󰅈类干音</th>
                <th>󰅌类干音</th>
                <th>󰅘类干音</th>
            </tr>
            <tr>
                <td>󰅘类干音</td>
                <td>󰅨类干音</td>
                <td>󰅸类干音</td>
                <td>󰅼类干音</td>
                <td>󰆄类干音</td>
            </tr>
            <tr>
                <td>󰆈类干音</td>
                <td>󰆌类干音</td>
                <td>󰆔类干音</td>
                <td>󰆜类干音</td>
                <td>󰆤类干音</td>
            </tr>
            <tr>
                <td>󰆬类干音</td>
                <td>󰆼类干音</td>
                <td>󰇌类干音</td>
                <td>󰇘类干音</td>
                <td>󰅀类干音</td>
            </tr>
            <tr>
                <td>󰅄类干音</td>
                <td>󰅈类干音</td>
                <td>󰅌类干音</td>
                <td>󰅘类干音</td>
                <td>󰅨类干音</td>
            </tr>
            <tr>
    </table>
    <br>
    <table border="1">
        <tr>
            <th colspan="2">跨列表头</th>
        </tr>
        <tr>
            <td>数据1</td>
            <td>数据2</td>
        </tr>
    </table>
    <br>
    <table border="1">
        <tr>
            <th rowspan="2">跨行表头</th>
            <td>数据1</td>
        </tr>
        <tr>
            <td>数据2</td>
        </tr>
    </table>
    <br>
    <table border="1">
        <thead>
            <tr>
                <th>表头1</th>
                <th>表头2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>数据1</td>
                <td>数据2</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>页脚1</td>
                <td>页脚2</td>
            </tr>
        </tfoot>
    </table>
    <br>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        
        th,
        td {
            border: 1px solid #000;
            padding: 8px;
            text-align: center;
        }
        
        th {
            background-color: #f2f2f2;
        }
    </style>
    <br>
    <table>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
        </tr>
        <tr>
            <td>数据1</td>
            <td>数据2</td>
        </tr>
    </table>

</body>

</html>